<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛成绩管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">团体成绩名次</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="team-card">
            <div class="team-select">
                <div class="team_sex">
                    <el-form>
                        <el-form-item label="性别：">
                            <el-select v-model="tsex" @change="sexChangebtn">
                                <el-option label="男子" :value="1"></el-option>
                                <el-option label="女子" :value="2"></el-option>
                                <el-option label="综合" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="col-2">
                    <el-form label-width="80">
                        <el-form-item label="组别：">
                            <el-select v-model="tgroup" @change="groupChangebtn">
                                <el-option v-for="(item, index) in groupData" :key="index + 1" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="col-3">
                    <el-button type="warning" @click="postStatistics">统计</el-button>
                </div>
                <div class="col-4">
                    <el-button type="primary" @click="exportExcel">导出</el-button>
                </div>
            </div>

            <el-table :data="teamData" border stripe>
                <el-table-column label="名次" width="80">
                    <template #default="scope">
                        {{ scope.row.tno === 0 ? "" : scope.row.tno }}
                    </template>
                </el-table-column>
                <el-table-column prop="teamName" label="单位">
                </el-table-column>
                <el-table-column prop="msidscore" label="项目加分">
                </el-table-column>
                <el-table-column prop="recscore" label="记录加分">
                </el-table-column>
                <el-table-column prop="levelscore" label="等级加分">
                </el-table-column>
                <el-table-column prop="score" label="总分">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import XLSX from 'xlsx'
import { ElLoading } from 'element-plus'
export default {
    components: {
        XLSX,
    },
    data() {
        return {
            tsex: 1,
            tgroup: null,
            groupData: [],
            teamData: [],
        }
    },
    created() {
        this.getGroupinfoList();
    },
    methods: {
        // 查询数据
        async getGroupinfoList() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/match/getGroupmsg');
                if (result.data.code == 0) {
                    this.groupData = result.data.data
                    this.tgroup = this.groupData[0].grid
                    this.geteaminfoList();
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async geteaminfoList() { // 数据
            const result = await this.$http.get(this.BACKEND_URL + '/scores/getmsg', {
                params: {
                    grid: this.tgroup,
                    sex: this.tsex
                }
            })
            if (result.data.code == 0) {
                this.teamData = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        sexChangebtn(val) {
            this.tsex = val
            this.geteaminfoList()
        },
        groupChangebtn(val) {
            this.tgroup = val
            this.geteaminfoList()
        },
        // 统计
        async postStatistics() {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            const result = await this.$http.get(this.BACKEND_URL + '/scores/setrank', {
                params: {
                    grid: this.tgroup,
                    sex: this.tsex
                }
            });
            if (result.data.code == 0) {
                loading.close();
                this.geteaminfoList()
                this.$message({
                    type: 'success',
                    message: '统计成功!'
                });
            } else if (result.data.code == 500) {
                loading.close();
                console.log(result.data.msg)
            }
        },
        async exportExcel() {
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/scores/export', {
                    params: {
                        grid: this.tgroup,
                        sex: this.tsex
                    },
                    responseType: 'blob',
                });
                let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', '综合团体总分排名S.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        }
    }
}
</script>

<style lang="less" scoped>
.team-card {
    margin-top: 15px;
}

.col-4 {
    text-align: right;
}
.team-select{
    display: flex;
    .team_sex{
        width: 140px;
    }
    .col-2{
        width: 180px;
    }
    .col-3{
        margin-left: 10px;
    }
    .col-4{
        flex: 1;
        text-align: right;
    }
}
</style>